<template>
    <el-dialog title="待确认：" :visible.sync="dialogVisible" top="15vh !important" width="30%" append-to-body >
        <div v-if="hasData" class="dialog-content">
            <div v-if="datas.costAmount" class="dialog-row">
                <span class="dialog-label">成本价格：</span><span class="dialog-data">{{ datas.costAmount }}</span>
            </div>
            <div v-if="datas.payAmount" class="dialog-row">
                <span class="dialog-label">代理价格：</span><span class="dialog-data">{{ datas.payAmount }}</span>
            </div>
            <div v-if="datas.minAge && datas.maxAge" class="dialog-row">
                <span class="dialog-label">年龄范围：</span><span class="dialog-data">{{ datas.minAge }} - {{ datas.maxAge
                    }}</span>
            </div>
            <div v-if="datas.cityInfo" class="dialog-row">
                <span class="dialog-label">推送城市：</span><span class="dialog-data">{{ this.cityInfo }}</span>
            </div>
            <div v-if="datas.starttime && datas.endtime" class="dialog-row">
                <span class="dialog-label">推送时间：</span><span class="dialog-data">{{ datas.starttime }} -- {{
                    datas.endtime }}</span>
            </div>
            <div v-if="datas.zhima" class="dialog-row">
                <span class="dialog-label">芝麻分数：</span><span class="dialog-data">{{ JSON.parse(datas.zhima).map(item =>
                    dynamicParam.zhima[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.loanAmount" class="dialog-row">
                <span class="dialog-label">贷款金额：</span><span class="dialog-data">{{
                    JSON.parse(datas.loanAmount).map(item => dynamicParam.loanAmount[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.loanTime" class="dialog-row">
                <span class="dialog-label">贷款时间：</span><span class="dialog-data">{{ JSON.parse(datas.loanTime).map(item=> 
                dynamicParam.loanTime[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.house" class="dialog-row">
                <span class="dialog-label">房产：</span><span class="dialog-data">{{ JSON.parse(datas.house).map(item =>
                    dynamicParam.house[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.car" class="dialog-row">
                <span class="dialog-label">车产：</span><span class="dialog-data">{{ JSON.parse(datas.car).map(item =>
                    dynamicParam.car[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.gjj" class="dialog-row">
                <span class="dialog-label">公积金：</span><span class="dialog-data">{{ JSON.parse(datas.gjj).map(item =>
                    dynamicParam.gjj[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.shebao" class="dialog-row">
                <span class="dialog-label">社保：</span><span class="dialog-data">{{ JSON.parse(datas.shebao).map(item =>
                    dynamicParam.shebao[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.baoxian" class="dialog-row">
                <span class="dialog-label">保险：</span><span class="dialog-data">{{ JSON.parse(datas.baoxian).map(item =>
                    dynamicParam.baoxian[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.yuqi" class="dialog-row">
                <span class="dialog-label">逾期：</span><span class="dialog-data">{{ JSON.parse(datas.yuqi).map(item =>
                    dynamicParam.yuqi[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.huabei" class="dialog-row">
                <span class="dialog-label">花呗：</span><span class="dialog-data">{{ JSON.parse(datas.huabei).map(item =>
                    dynamicParam.huabei[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.baitiao" class="dialog-row">
                <span class="dialog-label">白条：</span><span class="dialog-data">{{ JSON.parse(datas.baitiao).map(item =>
                    dynamicParam.baitiao[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.shouru" class="dialog-row">
                <span class="dialog-label">收入：</span><span class="dialog-data">{{ JSON.parse(datas.shouru).map(item =>
                    dynamicParam.shouru[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.xueli" class="dialog-row">
                <span class="dialog-label">学历：</span><span class="dialog-data">{{ JSON.parse(datas.xueli).map(item =>
                    dynamicParam.xueli[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.yongtu" class="dialog-row">
                <span class="dialog-label">用途：</span><span class="dialog-data">{{ JSON.parse(datas.yongtu).map(item =>
                    dynamicParam.yongtu[item]).join(', ') }}</span>
            </div>
            <div v-if="datas.orFilter" class="dialog-row">
                <span class="dialog-label">任选：</span><span class="dialog-data">{{ JSON.parse(datas.orFilter).map(item =>
                    dynamicParam.orFilter[item]).join(', ') }}</span>
            </div>

        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            resolve: undefined,
            reject: undefined,
            datas: {},
            cityShen: {},
            cityShi: {},
            dynamicParam: {},
            cityInfo: []

        }
    },
    watch: {
        dialogVisible(val) {
            if (!val && this.reject) {
                this.reject('取消');
            }
        }
    },
    computed: {
        hasData() {
            return this.datas.priceAmount || this.datas.minAge || this.datas.maxAge || this.datas.zhima || this.datas.city || (this.datas.starttime && this.datas.endtime);
        }
    },
    methods: {
        show(data, dynamicParamList, addressInfoList) {
            this.datas = data;
            const cityShen = addressInfoList.reduce((a,b) => ({...a, [b.cityCode]: b.city}), {})
            const cityShi = addressInfoList.map(item => item.children).flat().filter(item => !!item).reduce((a,b) => ({...a, [b.cityCode]: b.city}), {})
            const cityInfoList = data.cityInfo ? JSON.parse(data.cityInfo) : []
            const createCityInfoData = (cityInfoList) => {
                const cityInfoShenList = cityInfoList.filter(item => item.slice(2) === '0000')
                const cityInfoTemp = cityInfoList.filter(item => item.slice(2) === '0000' || !cityInfoShenList.some(itemJ => itemJ.slice(0, 2) === item.slice(0, 2)))
                const cityInfo = cityInfoTemp.map(item => {
                    if (item === '999999') return '全国'
                    return item.slice(2) === '0000' ? cityShen[item] : cityShi[item]
                })
                return cityInfo;
            }
            this.cityInfo =  createCityInfoData(cityInfoList);

            this.dynamicParam = dynamicParamList.reduce((a, b) => ({ ...a, [b.filedName]: b.children.reduce((a, b) => ({ ...a, [b.value]: b.name }), {}) }), {})

            this.dialogVisible = true;
            return new Promise((resolve, reject) => {
                this.resolve = resolve;
                this.reject = reject;
            });
        },
        submit() {
            if (this.resolve) this.resolve();
            this.dialogVisible = false;
        },
    }
}
</script>

<style scoped>
.dialog-content {
    font-size: 18px;
    color: #333;
}

.dialog-row {
    margin: 10px 0;
}

.dialog-label {
    font-weight: bold;
}

.dialog-data {
    color: #409EFF;
}

.dialog-footer {
    text-align: right;
}
</style>